{% if section.page_id %}
{% get_product product_id={section.page_id} body_html=1 %}
{% assign product = product %}
{% assign payment = section.params.payment %}
{% assign comments = comments | default : section.params.comments %}
{% endif %}


<style>

  .product_detail_default {
    margin: 0 auto;
  }
  
  .product_detail_default .product-info-subtitle {
    text-align: center;
    margin-bottom: 12px;
    color: var(--title_color);
    font-size: var(--product_font_size);
  }
  
  .product_detail_default .product-warp {
    margin: 60px auto 0 auto;
    max-width: var(--general_layout_width);
  }

  
  .product_detail_default .product-warp .product-left{
    position: relative;
  }
  .product_detail_default .product-info-describe {
    text-align: center;
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--detail_color);
  }
  
  .product-swiper-small .arrow {
    padding: 0 12px;
    display: none;
    font-size: 0;
  }
  
  .cell-star {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
  }
  
  .product-comment-fraction {
    display: flex;
    align-items: center;
  }
  
  .product-comment-fraction svg {
    margin-right: 4px;
  }
  
  .product-comment-fraction > svg:last-child {
    margin-right: 0;
  }
  
  .product-comment-fraction span {
    font-weight: 500;
    color: #1d1f21;
    font-size: 18px;
    line-height: 1;
    margin-left: 6px;
  }
  
  .comment-star-warp {
      position: relative;
    display: flex;
    align-items: center;
  }
  
  .comment-star-warp-choose {
      position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  
  .product_detail_default .product-card-bottom {
    margin: 16px auto 0 auto;
    max-width: var(--general_layout_width);
  }
  
  .comment-star-warp-choose svg {
    flex-shrink: 0;
  }
  
  .product_detail_default .swiper-button-disabled path {
    fill: #999999;
  }
  
  @media (max-width: 767px) {
    .product-swiper-small .arrow {
      display: inline-block;
    }
    .product-swiper-small {
      display: flex;
      justify-content: space-between;
      padding: 15px 0;
    }
    /* .product-swiper-small .swiper-container-small {
              display: flex;
              justify-content: center;
          } */
    .product-swiper-small .swiper-container-small .swiper-small-item {
      width: 10px;
      height: 10px;
      border: 2px solid var(--color-main);
      border-radius: 50%;
      box-sizing: border-box;
    }
    .product-swiper-small .swiper-container-small .swiper-small-item:last-child {
      margin-right: 0 !important;
    }
    .product-swiper-small .swiper-container-small .active {
      border: 2px solid var(--color-main);
      background-color: var(--color-main);
    }
    .product-swiper-small .swiper-container-small .swiper-small-item img {
      display: none;
    }
    .product-swiper-small .swiper-container-small .swiper-small-item .video-icon {
      display: none;
    }
  }
  
  .product_detail_default .product-right .secondary_btn, .product_detail_default .product-right .main_btn {
    margin-top: 0;
      position: relative;
    z-index: 100;
  }
  
  .product_detail_default .comment_warp-empty {
    /* text-align: center;
          height: 60px;
          line-height: 60px;
          font-size: 16px; */
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 20px 0;
  }
  
  .product_detail_default .comment_warp-empty span {
    color: #888888;
    font-size: 14px;
    line-height: 18px;
    margin-top: 20px;
  }
  
  .product_detail_default .cell-item {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .product-router-nav {
    /* align-items: center; */
    color: #737373;
    font-size: 14px;
    line-height: 22px;
    flex-wrap: wrap;
    padding: 16px 0;
    background: #F6F6F6;
  }
  
  .product-router-nav-warp {
    margin: 0 auto;
    max-width: var(--general_layout_width);
  }
  
  .product-router-nav a {
    color: #999999;
    font-size: 14px;
    line-height: 17px;
  }
  
  .product-router-nav .on {
    color: #666666;
    overflow: hidden;
  }
  
  .product-router-nav span {
    padding: 0 4px;
  }
  .product_detail_default .product-tabs .product-tabs-item,.product_detail_default .module-box .module-cell-header .module-cell-tile{
    font-size: var(--product_font_size);
  }
  
  


  .product-wishlist{
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 14px;
    gap: 10px;
    cursor: pointer;
  }
  .cell-star >div:not([hidden])~:not([hidden]){
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #dddddd;
  }

  .product-preview-wishlist{
    position: absolute;
    top: 15px;
    right:  15px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    opacity: 0.9;
    border-radius: 50%;
    display: none;
    
  }

  @media screen and (min-width: 846px) and (max-width: 1200px) {
    .product-router-nav {
      padding: 16px 30px;
    }
  }

  @media screen and (max-width: 845px) {
    .product-router-nav ,.product-wishlist{
      display: none;
    }
    .product-preview-wishlist{
      display: flex;
    }
  }
 

  .wishlist-box:active svg{
    animation: wishlistShow 0.7s ease-in-out;
  }
  .wishlist-box .active{
    display: none;
  }
  .wishlist-box .no{
    display: block;
  }
  .product-wishlist-active .active{
    display: block;
  }
  .product-wishlist-active .no{
    display: none;
  }
</style>
{% unless section.settings.bread_crumbs %}
	<style>
		.product-router-nav{
			display:none !important;
		}
	</style>
{% endunless %}
{% assign product_shopping_btn = theme_config.global.product_shopping_btn | default :'show' %}
<div class="product_detail_default product_detail-card-bottom" id="product_detail">

  <div class="plugin-container-header"></div>

      <div class="product-warp">
      <div class="product-left"  id="control-product_detail-main_picture" {% if product.images.size == 1 %} style="margin-bottom:12px"  {% endif %}>
         
        <div class="product-right-sticky" style="--img-radius: {{ section.settings.img_radius }}px;">
          {%- assign productId = product.id | default: block_id  -%}
          {%- case section.settings.image_type -%}
              {%- when "img2tiledown" -%}
                  {% include 'product_preview_img2_tiledown', previewImage:product.images ,productId: productId,source:"product_detail" %}
              {%- when "tiledown" -%}
                  {% include 'product_preview_tiledown', previewImage:product.images ,productId: productId,source:"product_detail" %}
              {%- when "bigtiledown" -%}
                  {% include 'product_preview_bigtiledown', previewImage:product.images ,productId: productId ,source:"product_detail"%}
              {%- when "right" -%}
                  {% include 'product_preview_right', previewImage:product.images ,productId: productId,blockId:block_id,  showSmall:true,source:"product_detail"  %}
              {%- when "left" -%}
                  {% include 'product_preview_left', previewImage:product.images ,productId: productId,blockId:block_id,  showSmall:true ,source:"product_detail" %}
              {%- else -%}
                  {% include 'product_preview', previewImage:product.images ,productId: productId, blockId:block_id, showSmall:true,source:"product_detail" %}
          {%- endcase -%}
        </div>
        {% if storeConfig.wishlist_enable == '1' %}
        <div class="product-preview-wishlist wishlist-box {% if product.in_wishlist == 1 %}product-wishlist-active{% endif %}">
            <div class="wishlist-animated">
              <svg t="1679540869726" class="no" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4980" width="18" height="18"><path d="M754.451692 157.696a188.022154 188.022154 0 0 0-28.672 2.244923 304.521846 304.521846 0 0 0-143.675077 71.483077l-50.451692 42.023385-50.412308-42.023385a304.167385 304.167385 0 0 0-143.635692-71.443692 188.258462 188.258462 0 0 0-28.672-2.244923 179.042462 179.042462 0 0 0-127.448615 55.138461 200.231385 200.231385 0 0 0-62.306462 165.888 325.474462 325.474462 0 0 0 106.338462 194.520616l196.371692 192.196923 109.804308 107.95323 31.074461-30.483692 87.630769-86.016 27.569231-27.096615c81.959385-80.344615 138.712615-135.995077 159.940923-156.672a325.395692 325.395692 0 0 0 106.338462-194.402462 200.270769 200.270769 0 0 0-62.306462-165.888 179.042462 179.042462 0 0 0-127.40923-55.138461m0-78.769231a257.693538 257.693538 0 0 1 182.390153 77.627077 278.016 278.016 0 0 1 85.700923 230.242461 402.195692 402.195692 0 0 1-129.614769 242.845539c-21.149538 20.637538-78.099692 76.406154-159.744 156.514461-36.745846 36.036923-75.815385 74.358154-115.2 113.073231l-53.523692 52.499692a46.788923 46.788923 0 0 1-65.575385 0l-160.17723-157.538461-168.290462-164.745846a402.077538 402.077538 0 0 1-129.575385-242.845539 277.937231 277.937231 0 0 1 85.700923-230.242461A255.409231 255.409231 0 0 1 349.696 81.92a379.864615 379.864615 0 0 1 182.075077 88.772923 380.179692 380.179692 0 0 1 182.075077-88.772923 265.964308 265.964308 0 0 1 40.605538-2.993231z" p-id="4981"></path></svg>
              <svg t="1679638623967" class="active" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6079" width="18" height="18"><path fill="#F11752" d="M713.728 81.959385a255.330462 255.330462 0 0 1 223.074462 74.476307 278.016 278.016 0 0 1 85.700923 230.242462 402.195692 402.195692 0 0 1-129.61477 242.845538c-21.149538 20.637538-78.099692 76.406154-159.744 156.514462-36.745846 36.036923-75.815385 74.358154-115.2 113.073231l-38.32123 37.572923-15.202462 14.926769a46.788923 46.788923 0 0 1-65.575385 0l-132.253538-129.969231-27.923692-27.372308-168.290462-164.745846a402.077538 402.077538 0 0 1-129.575384-242.845538 277.937231 277.937231 0 0 1 85.700923-230.242462 255.409231 255.409231 0 0 1 223.074461-74.476307 379.864615 379.864615 0 0 1 182.075077 88.772923 380.179692 380.179692 0 0 1 182.075077-88.772923z" p-id="6080"></path></svg>
            </div>
        </div>
        {% endif %}

      </div>
      <div class="product-right {{theme_config.global.product_right_float}}" id="sku-option-{{ block_id | default : section.block_id }}">
          <div class="product-right-sticky">
          <!-- title -->
          <div class="plugin-product_detail-title_top" data-product-id="{{product.id}}"></div>
          <div class="product-name">
              <p>{{ product.title }}</p>
              <div class="cell-star">
                {% include 'fake_score' %}
                {% if storeConfig.wishlist_enable == '1' %}
                <div class='product-wishlist wishlist-box {% if product.in_wishlist == 1 %}product-wishlist-active{% endif %}'>
                    <span class="wishlist-animated">
                            <svg t="1679540869726" class="no" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4980" width="18" height="18"><path d="M754.451692 157.696a188.022154 188.022154 0 0 0-28.672 2.244923 304.521846 304.521846 0 0 0-143.675077 71.483077l-50.451692 42.023385-50.412308-42.023385a304.167385 304.167385 0 0 0-143.635692-71.443692 188.258462 188.258462 0 0 0-28.672-2.244923 179.042462 179.042462 0 0 0-127.448615 55.138461 200.231385 200.231385 0 0 0-62.306462 165.888 325.474462 325.474462 0 0 0 106.338462 194.520616l196.371692 192.196923 109.804308 107.95323 31.074461-30.483692 87.630769-86.016 27.569231-27.096615c81.959385-80.344615 138.712615-135.995077 159.940923-156.672a325.395692 325.395692 0 0 0 106.338462-194.402462 200.270769 200.270769 0 0 0-62.306462-165.888 179.042462 179.042462 0 0 0-127.40923-55.138461m0-78.769231a257.693538 257.693538 0 0 1 182.390153 77.627077 278.016 278.016 0 0 1 85.700923 230.242461 402.195692 402.195692 0 0 1-129.614769 242.845539c-21.149538 20.637538-78.099692 76.406154-159.744 156.514461-36.745846 36.036923-75.815385 74.358154-115.2 113.073231l-53.523692 52.499692a46.788923 46.788923 0 0 1-65.575385 0l-160.17723-157.538461-168.290462-164.745846a402.077538 402.077538 0 0 1-129.575385-242.845539 277.937231 277.937231 0 0 1 85.700923-230.242461A255.409231 255.409231 0 0 1 349.696 81.92a379.864615 379.864615 0 0 1 182.075077 88.772923 380.179692 380.179692 0 0 1 182.075077-88.772923 265.964308 265.964308 0 0 1 40.605538-2.993231z" p-id="4981"></path></svg>
                            <svg t="1679638623967" class="active" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6079" width="18" height="18"><path fill="#F11752" d="M713.728 81.959385a255.330462 255.330462 0 0 1 223.074462 74.476307 278.016 278.016 0 0 1 85.700923 230.242462 402.195692 402.195692 0 0 1-129.61477 242.845538c-21.149538 20.637538-78.099692 76.406154-159.744 156.514462-36.745846 36.036923-75.815385 74.358154-115.2 113.073231l-38.32123 37.572923-15.202462 14.926769a46.788923 46.788923 0 0 1-65.575385 0l-132.253538-129.969231-27.923692-27.372308-168.290462-164.745846a402.077538 402.077538 0 0 1-129.575384-242.845538 277.937231 277.937231 0 0 1 85.700923-230.242462 255.409231 255.409231 0 0 1 223.074461-74.476307 379.864615 379.864615 0 0 1 182.075077 88.772923 380.179692 380.179692 0 0 1 182.075077-88.772923z" p-id="6080"></path></svg>
                    </span>
                    <span style="user-select:none;">{{lang.product.wishlist | default :"wishlist"}}</span>
                </div>
                {% endif %}

              </div>
          </div>
          

          {% if product.subtitle %}
          <div class="product-info-subtitle">{{ product.subtitle }}</div>
          {% endif %}
          {% comment %} sku spu控制 {% endcomment %}
          {% include 'product_sku_spu_show', className:"product-info-describe",style:"",spu:product.spu,sku:product.variant.sku %}          
          {% if product.mini_detail %}
          <div class="product-info-describe">{{ product.mini_detail | newline_to_br }}</div>
          {% endif %}

          <!-- sku -->
          <div class="product-sku">
              <div class="cell-item" id="plugin-product-price" style="margin-top: 0">
                  <div class="product-price">
                      <div class="product-price-number general_buying-color"></div>
                      <div class="product-price-market general_original-color"></div>
                      {%- if theme_config.global.product_discount_label_style_switch -%}
                      <div class="product-price-discount"></div>
                      {%- endif -%}
                  </div>
              </div>
              {%- if product.virtual_sale_count -%}
                <div class="product-info-describe virtual_sale">{{ product.virtual_sale_count | plus: product.sale_count }} {{lang.product.sold}}</div>
              {%- endif -%}
              <div class="plugin-product_detail-price_bottom"  data-product-id="{{product.id}}"></div>
              <div class="sku-cell"></div>
              <div class="plugin-product_detail-quantity_top" data-product-id="{{product.id}}"></div>
              
              {% if theme_config.global.product_quantity or theme_config.global.product_quantity  == nil %}
                  <div class="cell-item">
                      <span class="product-sku-name">{{lang.cart.list.quantity}}</span>
                  </div>
                  <div class="cell-item product-calculator-cell-item">
                    <div class="flex gap-4 flex-1">
                        <div class="product-calculator" id='mo-quantity'>
                          <div class="product-calculator-handle" data-type='reduce'>
                              {% include icon_minus ,{width:'16',height:'16'} %}
                          </div>
                          <input class="product-calculator-value"  min="1" type="number" value="{{theme_config.global.product_quantity_number | default:1}}"/>
                          <div class="product-calculator-handle" data-type='add'>
                              {% include icon_plus ,{width:'16',height:'16'} %}
                          </div>
                        </div>
                        {%- if product_shopping_btn != 'hide' -%}
                          {% if product.status == 1 %}
                            {% if product.available == 1 %}
                              {%- if product_shopping_btn == 'add' or product_shopping_btn == 'show'  -%}
                                <div class="product-cart-group flex-1">
                                  <div class="secondary_btn product-cart control-product_detail-cart" style="width:100%;" data-type="cart" data-plug="cart" id='add-cart-{{ product.id }}'>{{lang.product.add_to_cart}}</div>
                                </div>
                                  
                              {%- endif -%}
                            {% endif %}
                          {% else %}
                            {% if storeConfig.product_put_off_control == 'buy' or storeConfig.product_put_off_control == '404' %}
                              {% if product.available == 1 %}
                                <div class="product-cart-group flex-1">
                                  <div class="secondary_btn product-cart control-product_detail-cart" style="width:100%;" data-type="cart" data-plug="cart" id='add-cart-{{ product.id }}'>{{lang.product.add_to_cart}}</div>
                                </div>
                              {% endif %}
                            {% endif %}
                            {% comment %} 兼容老数据 {% endcomment %}
                            {% unless storeConfig.product_put_off_control %}
                              {% if product.available == 1 %}
                                <div class="product-cart-group flex-1">
                                  <div class="secondary_btn product-cart control-product_detail-cart" style="width:100%;" data-type="cart" data-plug="cart" id='add-cart-{{ product.id }}'>{{lang.product.add_to_cart}}</div>
                                </div>
                              {% endif %}
                            {% endunless %}
                          {% endif %}
                        {% endif %}
                    </div>
                      
                  </div>
              {% endif %}
              <div class="plugin-product_detail-buy_top"  data-product-id="{{product.id}}"></div>
              <div class="cell-item product-calculator-cell-item">
                 {%- if product_shopping_btn != 'hide' -%}
                    {% if product.status == 1 %}
                      {% if product.available == 1 %}
                        <div class="product-btns product-cart-group">
                          {% if product_shopping_btn == 'buy' or product_shopping_btn == 'show'  %}
                          <div class="main_btn product-now control-product_detail-buy" data-type="buyNow" data-plug="buy_now" id="buynow-{{ product.id }}">{{lang.product.buy_it_now}}</div>
                          {% endif %}
                        </div>
                        <div class="product-btns product-out-of-stock" style="display: none;" >
                          <div class="mo-btn mo-btn-default mo-btn-disable mo-btn-plan mo-btn-max mo-btn-block" >{{lang.account.wishlist.product_offline}}</div>
                        </div>
                      {% else %}
                      <div class="product-btns product-out-of-stock">
                        <div class="mo-btn mo-btn-default mo-btn-disable mo-btn-plan mo-btn-max mo-btn-block" >{{lang.product.out_of_stock}}</div>
                      </div>
                      {% endif %}

                      {% else %}
                        {% if storeConfig.product_put_off_control == 'buy' or storeConfig.product_put_off_control == '404' %}
                          {% if product.available == 1 %}
                            <div class="product-btns product-cart-group">
                              {% if product_shopping_btn == 'buy' or product_shopping_btn == 'show'  %}
                              <div class="main_btn product-now control-product_detail-buy" data-type="buyNow" data-plug="buy_now" id="buynow-{{ product.id }}">{{lang.product.buy_it_now}}</div>
                              {% endif %}
                            </div>
                            {% else %}
                            <div class="mo-btn mo-btn-default mo-btn-disable mo-btn-plan mo-btn-max mo-btn-block" >{{lang.product.out_of_stock}}</div>
                          {% endif %}
                        {% endif %}

                        {% if storeConfig.product_put_off_control == 'visible' %}
                          <div class="product-btns product-out-of-stock">
                            <div class="mo-btn mo-btn-default mo-btn-disable mo-btn-plan mo-btn-max mo-btn-block" >{{lang.account.wishlist.product_offline}}</div>
                          </div>
                        {% endif %}

                        {% comment %} 兼容老数据 {% endcomment %}
                        {% unless storeConfig.product_put_off_control %}
                          {% if product.available == 1 %}
                              <div class="product-btns product-cart-group">
                                {% if product_shopping_btn == 'buy' or product_shopping_btn == 'show'  %}
                                <div class="main_btn product-now control-product_detail-buy" data-type="buyNow" data-plug="buy_now" id="buynow-{{ product.id }}">{{lang.product.buy_it_now}}</div>
                                {% endif %}
                              </div>
                              {% else %}
                              <div class="mo-btn mo-btn-default mo-btn-disable mo-btn-plan mo-btn-max mo-btn-block" >{{lang.product.out_of_stock}}</div>
                          {% endif %}
                        {% endunless %}
                    {% endif %}
                {% endif %}

                <div class="product-btns product-out-of-delete" style="display: none;">
                  <div class="mo-btn mo-btn-default mo-btn-disable mo-btn-plan mo-btn-max mo-btn-block" >{{lang.account.wishlist.product_offline}}</div>
                </div>
              </div>
              
              {% if payment %}
                {% if product.status == 1 %}
                  {% if product.available == 1 %}
                    <div class="cell-item product-payment-box" style="margin-top:20px">
                        {% include product_payment_paypalcheckout , { pay_block_id:block_id } %}
                    </div>
                  {% endif %}
                
                {% else %}
                {% if storeConfig.product_put_off_control == 'buy' or storeConfig.product_put_off_control == '404' %}
                 {% if product.available == 1 %}
                    <div class="cell-item product-payment-box" style="margin-top:20px">
                        {% include product_payment_paypalcheckout , { pay_block_id:block_id } %}
                    </div>
                 {% endif %}
                {% endif %}

                {% comment %} 兼容老数据 {% endcomment %}
                {% unless storeConfig.product_put_off_control %}
                  {% if product.available == 1 %}
                    <div class="cell-item product-payment-box" style="margin-top:20px">
                        {% include product_payment_paypalcheckout , { pay_block_id:block_id } %}
                    </div>
                  {% endif %}
                {% endunless %}
                
                {% endif %}
              {% endif %}
              <div class="plugin-product_detail-buy_bottom"  data-product-id="{{product.id}}"></div>
              {%- if section.settings.content -%}
              <div class="cell-item mo-editor-reset" style="margin-top:20px">
                  {{section.settings.content}}
              </div>
              {%- endif -%}
              <div class="plugin-product_detail-buy_describe_bottom"  data-product-id="{{product.id}}"></div>

          </div>
          <div class="product-card-right" style="display:{% if section.settings.position == "right" %}block{% else %}none{% endif %} ;">
              <!-- detail -->
              <div class="plugin-product_detail-tabs_top"  data-product-id="{{product.id}}"></div>
              <div class="module-box">
                  <div class="module-cell module-cell-active">
                      <div class="module-cell-header">
                          <span class="module-cell-tile">{{lang.product.detail}}</span>
                          <span class="add-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-caret" viewBox="0 0 512 512" fill="currentColor">
                                <title>Caret Down</title><path d="M98 190.06l139.78 163.12a24 24 0 0036.44 0L414 190.06c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62z"></path>
                            </svg>
                          </span>
                          <span class="reduce-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-caret" viewBox="0 0 512 512" fill="currentColor">
                                <title>Caret Down</title><path d="M98 190.06l139.78 163.12a24 24 0 0036.44 0L414 190.06c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62z"></path>
                            </svg>
                          </span>
                      </div>
                      <div class="detail-box mo-editor-reset product-tabs-content-detail">
                          {{ product.body_html }}
                      </div>
                  </div>
                  {% if storeConfig.comments_status %}
                  <div class="module-cell" data-type="comment">
                      <div class="module-cell-header">
                          <span class="module-cell-tile">{{lang.product.customer_reviews}}</span>
                          <span class="add-icon">
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-caret" viewBox="0 0 512 512" fill="currentColor">
                                <title>Caret Down</title><path d="M98 190.06l139.78 163.12a24 24 0 0036.44 0L414 190.06c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62z"></path>
                                </svg>
                          </span>
                          <span class="reduce-icon">
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-caret" viewBox="0 0 512 512" fill="currentColor">
                                <title>Caret Down</title><path d="M98 190.06l139.78 163.12a24 24 0 0036.44 0L414 190.06c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62z"></path>
                                </svg>
                          </span>
                      </div>
                      <div class="detail-box">
                          <div class="comment-warp" id="comment-right-warp"></div>
                          <a href="/comments/{{product.handle}}" style="margin-top: 24px;" class="comment-btn secondary_btn">{{lang.product.all_comment}}</a>
                      </div>
                  </div>
                  {% endif %}
              </div>
              <div class="plugin-product_detail-tabs_bottom"  data-product-id="{{product.id}}"></div>
              {% if section.settings.position == "right" %}
              {% include product_share_svg %}
              {% endif %}
          </div>
          </div>
      </div>
  </div>
  <div class="product-card-bottom" style="display:{% if section.settings.position == "right" %}none{% else %}block{% endif %} ;">
      <div class="plugin-product_detail-tabs_top"  data-product-id="{{product.id}}"></div>

      <div class="product-tabs">
          <div  class="product-tabs-item product-tabs-item-active">{{lang.product.detail}}</div>
          {% if storeConfig.comments_status == 1 %}
          <div  class="product-tabs-item" data-type="comment">{{lang.product.customer_reviews}}</div>
          {% endif %}
      </div>
      <div class="product-tabs-content">
          <div class="product-tabs-content-item product-tabs-content-item-active mo-editor-reset product-tabs-content-detail">
              {{ product.body_html }}
          </div>
          {% if storeConfig.comments_status == 1 %}
          <div class="product-tabs-content-item ">
              <div class="comment-warp" id="comment-bottom-warp"></div>
              <a href="/comments/{{product.handle}}" class="comment-btn secondary_btn">{{lang.product.all_comment}}</a>
          </div>
          {% endif %}

      </div>
      <div class="plugin-product_detail-tabs_bottom"  data-product-id="{{product.id}}"></div>
  </div>


  {% unless section.settings.position == "right" %}
  {% include product_share_svg %}
  {% endunless %}
  <div class="plugin-container-footer"></div>


  <div class="back-box">
      <a href="javascript:history.back();">
          <svg t="1642570712144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24369" width="24" height="24"><path d="M85.333333 512.042667l320-256v213.333333H1024v85.333333H405.333333v213.333334z" p-id="24370"></path></svg>
          <span>{{lang.general.back}}</span>
      </a>
  </div>


</div>

{% include comment %}
<script type="text/x-template" id="omesaas-comment-empty">
{% include "empty" ,text:lang.comments.no_comments, icon:"comment" %}
</script>

<script type="text/javascript">
$(function(){
  var commentList = {{comments|json}};
  var waterfall = new waterfalls({
          id: "#comment-bottom-warp",
          bottomDistance: 30,
          renderType: "liquid",
          renderComplete(node) {
              {% comment %} window.addLazyImages && addLazyImages(node.find("img[data-src]")); {% endcomment %}
              node.find(".comment_warp-images img").click(function () {
                  const JqThis = $(this);
                  const parentIndex = JqThis.data("parent");
                  moi.pictureImages(commentList[parentIndex].images.src, JqThis.data("index") - 1, JqThis)
              })
          },
          resizeConfig: [
              {min: 0,max: 1023,rowGutter: '20px',columnsGutter: '20px',columns: 1},
              {min: 1024,rowGutter: '30px',columnsGutter: '30px',columns: 2}
          ],
          render(data, callback) {
              engine.parseAndRender($("#omesaas-comment-temp-block").html(), {
                  comments: data.map((item) => {
                          item.price = formatMoney(item.price, oemcart_currency);
                          item.created_at_str = moi.formatZoneDate(item.created_at, "YYYY-mm-dd");
                          item.replied_at_str = moi.formatZoneDate(item.replied_at, "YYYY-mm-dd");
                          return item;
                      }),
                     storeConfig: storeConfig,
                      lang: lang
              }).then(function (liquidHtml) {
                  const node = $(liquidHtml);
                  callback && callback.call(this, node)
              });

          }
  })

  var rightWaterfall = new waterfalls({
          id: "#comment-right-warp",
          bottomDistance: 30,
          renderType: "liquid",
          renderComplete(node) {
              {% comment %} window.addLazyImages && addLazyImages(node.find("img[data-src]")); {% endcomment %}
              node.find(".comment_warp-images img").click(function () {
                  var JqThis = $(this);
                  var parentIndex = JqThis.data("parent");
                  moi.pictureImages(commentList[parentIndex].images.src, JqThis.data("index") - 1, JqThis)
              })
          },
          resizeConfig: [
              {min: 0,rowGutter: '20px',columnsGutter: '20px',columns: 1}
          ],
          render(data, callback) {
              engine.parseAndRender($("#omesaas-comment-temp-block").html(), {
                  comments: data.map((item) => {
                          item.price = formatMoney(item.price, oemcart_currency);
                          item.created_at_str = moi.formatZoneDate(item.created_at, "YYYY-mm-dd");
                          item.replied_at_str = moi.formatZoneDate(item.replied_at, "YYYY-mm-dd");
                          return item;
                      }),
                     storeConfig: storeConfig,
                      lang: lang
              }).then(function (liquidHtml) {
                  const node = $(liquidHtml);
                  callback && callback.call(this, node)
              });
          }
  })
  var isCommentShow = false;
  if (!commentList.length) {
      $(".comment-warp").html($('#omesaas-comment-empty').html())
  }else{
      waterfall.addStorage({{comments|json}})
      rightWaterfall.addStorage({{comments|json}})
  }
})
</script>
<script type="text/javascript">
  moi.setPageStorage('product_detail', oemcart_product);
  function addProductTab(tabData,classStr) {
  if (!Array.isArray(tabData)) {
      console.error("tab data error");
      return false;
  }
 tabData.forEach((item) => {
          $(".product-tabs").append(`<div class="product-tabs-item ${classStr}" onclick="productTabsClick(this)">${item.title}</div>`);
          $(".module-box").append(`<div class="module-cell ${classStr}">
                      <div class="module-cell-header" onclick="moduleCellClick(this)">
                          <span class="module-cell-tile">${item.title}</span>
                          <span class="add-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-caret" viewBox="0 0 512 512" fill="currentColor">
                                <title>Caret Down</title><path d="M98 190.06l139.78 163.12a24 24 0 0036.44 0L414 190.06c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62z"></path>
                            </svg>
                          </span>
                          <span class="reduce-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-caret" viewBox="0 0 512 512" fill="currentColor">
                                <title>Caret Down</title><path d="M98 190.06l139.78 163.12a24 24 0 0036.44 0L414 190.06c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62z"></path>
                            </svg>
                          </span>
                      </div>
                      <div class="detail-box mo-editor-reset">${item.content}</div>
                      </div>`);
          $(".product-tabs-content").append(`<div class="product-tabs-content-item mo-editor-reset ${classStr}">${item.content}</div>`);
      });
  }
  var tabsClass = 'product-tabs-item-active';
  var contentClass = 'product-tabs-content-item-active';
  var cellClass = 'module-cell-active';
  function productTabsClick(elmnt){
      $(elmnt).addClass(tabsClass).siblings().removeClass(tabsClass);
      $('.product-tabs-content-item').eq($(elmnt).index()).addClass(contentClass).siblings().removeClass(contentClass);
      $('.module-cell').eq($(elmnt).index()).addClass(cellClass).siblings().removeClass(cellClass);
  };

  function moduleCellClick(elmnt){
          if($(elmnt).parent().hasClass(cellClass)){
              $(elmnt).parent().removeClass(cellClass)
          }else{
              $(elmnt).parent().addClass(cellClass).siblings().removeClass(cellClass);
              $('.product-tabs-item').eq($(elmnt).parent().index()).addClass(tabsClass).siblings().removeClass(tabsClass);
              $('.product-tabs-content-item').eq($(elmnt).parent().index()).addClass(contentClass).siblings().removeClass(contentClass);
          }
  };

 
  
  $(function(){
      $('.product-tabs-item').click(function () {
          $(this).addClass(tabsClass).siblings().removeClass(tabsClass);
          $('.product-tabs-content-item').eq($(this).index()).addClass(contentClass).siblings().removeClass(contentClass);
          $('.module-cell').eq($(this).index()).addClass(cellClass).siblings().removeClass(cellClass);
      })

      $('.module-cell .module-cell-header').click(function () {
          if($(this).parent().hasClass(cellClass)){
              $(this).parent().removeClass(cellClass)
          }else{
              $(this).parent().addClass(cellClass).siblings().removeClass(cellClass);
              $('.product-tabs-item').eq($(this).parent().index()).addClass(tabsClass).siblings().removeClass(tabsClass);
              $('.product-tabs-content-item').eq($(this).parent().index()).addClass(contentClass).siblings().removeClass(contentClass);
          }
      })
  })
</script>


<script type="text/javascript">
$(function(){
  
  
  var backBtn = "{{section.settings.back_btn}}";
  if(document.referrer === "" || backBtn == 'hide' ){
      $(".back-box").hide()
  }

  var productDetail = new omesaasProduct({
      product:oemcart_product,
      data_from:'{{ detail_data_from }}',
      ec_currency_code: '{{ base_currency.standard_code }}',
      id:'#sku-option-{{ block_id | default : section.block_id }}',
      block_id:"{{block_id}}",
      isMainProduct:true,
      wishlist:".wishlist-box",
      {% if theme_config.global.product_quantity == true %}
      quantity:{{theme_config.global.product_quantity_number | default:1}},
      {% endif %}
  })

  window.cuurentProductDetail = productDetail;
  
  //PayPal payment callback succeeded
  moi.addEvent('paypalec_callback', function (event) {
      if(event.params.payId === '{{block_id}}'){
          productDetail.callbackAddToCart();
      }
  })

  moi.quantity({
      dom: $("#product_detail #mo-quantity"),
      change(val) {
          productDetail.setSelectedVal({quantity:val.value });
      }
  })




  

  $("#add-cart-{{ product.id }}").click(function () {

      if(!productDetail.verifyOption("cart")){
           return false
      }
      moi.addEvent('addCart', function (event) {
          productDetail.cartLayer();
      },true)

      var load = moi.nodeShowLoading(this, "mo-loading-black")
      productDetail.addCart(function () {load.close();}, function (data) {
          if (!data.code) {
              let ids = '';
              if (oemcart_product.collections.length) {
                  ids = oemcart_product.collections.map((item) => item.collection_id).join(",")
              }
              moi.onEvent("addCart",{
                  product_id: productDetail.product.id,
                  collection_id: ids
              })
          } else {
              return moi.alert({
                  title: data.msg
              });
          }
      })

  })

  $("#buynow-{{ product.id }}").click(function () {

      if(!productDetail.verifyOption('buy')){
           return false
      }
      var load = moi.nodeShowLoading(this)

      productDetail.buynow(function () { load.close(); }, function (ret) {
          if (!ret.code) {
                  window.location.href = ret.data.checkout_url 
              } else {
                  return moi.alert({
                      title: ret.msg
                  });
              }
      })
  })

  })
</script>

{% schema %}
{
	"tag": "",
	"class": "product_detail",
	"is_global": false,
	"name": {
		"zh_CN": "商品详情",
		"en_US": "Product details"
	},
	"max_blocks": "0",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "元素展示",
				"en_US": "Element display"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "facebook",
				"en_US": "Facebook"
			},
			"default": true,
			"id": "is_facebook"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "twitter",
				"en_US": "Twitter"
			},
			"default": true,
			"id": "is_twitter"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Pinterest",
				"en_US": "Pinterest"
			},
			"default": true,
			"id": "is_pinterest"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Facebook Dialog",
				"en_US": "Facebook Dialog"
			},
			"default": true,
			"id": "is_dialog"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "vk",
				"en_US": "Vk"
			},
			"default": true,
			"id": "is_vk"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "linkedin",
				"en_US": "Linkedin"
			},
			"default": true,
			"id": "is_linkedin"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "line",
				"en_US": "Line"
			},
			"default": true,
			"id": "is_line"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "tumblr",
				"en_US": "Tumblr"
			},
			"default": true,
			"id": "is_tumblr"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "whatsapp",
				"en_US": "Whatsapp"
			},
			"default": true,
			"id": "is_whatsapp"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "面包屑",
				"en_US": "Breadcrumbs"
			},
			"default": true,
			"id": "bread_crumbs"
		},
		{
			"type": "card_select",
			"id": "back_btn",
			"label": {
				"zh_CN": "返回按钮控制",
				"en_US": "Back button control"
			},
			"option": [
				{
					"label": {
						"zh_CN": "显示",
						"en_US": "Display"
					},
					"value": "show"
				},
				{
					"label": {
						"zh_CN": "不显示",
						"en_US": "Do not show"
					},
					"value": "hide"
				}
			],
			"default": "show"
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "图片展示形式",
				"en_US": "Image display form"
			},
			"id": "image_type",
			"option": [
				{
					"label": {
						"zh_CN": "向下平铺",
						"en_US": "Tiling down"
					},
					"value": "tiledown"
				},
				{
					"label": {
						"zh_CN": "向下大小平铺",
						"en_US": "Tiling down size"
					},
					"value": "bigtiledown"
				},
        {
          "label": {
            "zh_CN": "2列向下平铺",
            "en_US": "2 columns tile downward"
          },
          "value": "img2tiledown"
        },
				{
					"label": {
						"zh_CN": "小图居下",
						"en_US": "Small image down"
					},
					"value": "bottom"
				},
				{
					"label": {
						"zh_CN": "小图居右",
						"en_US": "Small image on the right"
					},
					"value": "right"
				},
				{
					"label": {
						"zh_CN": "小图居左",
						"en_US": "Small image on the left"
					},
					"value": "left"
				}
			],
			"default": "bottom"
		},
    {
      "type": "card_input_number",
      "max": 200000,
      "min": 0,
      "id": "img_radius",
      "label": {
        "zh_CN": "图片圆角",
        "en_US": "Picture rounding"
      },
      "info": {
				"zh_CN": "内容宽度单位px",
        "en_US": "Content width unit px"
			},
      "default": 0
    },
		{
			"type": "card_select",
			"id": "position",
			"label": {
				"zh_CN": "详情位置",
				"en_US": "Detail location"
			},
			"option": [
				{
					"label": {
						"zh_CN": "下",
						"en_US": "Down"
					},
					"value": "bottom"
				},
				{
					"label": {
						"zh_CN": "右",
						"en_US": "Right"
					},
					"value": "right"
				}
			],
			"default": "bottom"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "其他内容",
				"en_US": "Other content"
			},
			"id": "content"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"is_facebook": true,
			"is_twitter": true,
			"is_pinterest": true,
			"bread_crumbs": true,
			"is_dialog": true,
			"is_vk": true,
			"is_tumblr": true,
			"position": "right",
			"is_linkedin": true,
			"is_whatsapp": true,
			"is_line": true,
			"back_btn": "show",
			"template": "2",
			"content": "",
			"image_type": "bottom",
      "img_radius": 0
		},
		"blocks": []
	}
}
{% endschema %}

